<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="renderer" content="webkit" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <!-- <meta name="referrer" content="no-referrer"/> --> 
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <title>Jquery中bind()、live()、delegate()和on()的区别 - 米虫 - 做一个有理想的米虫 - www.mebugs.com</title> 
  <meta name="expires" content="Mon, 09 Apr 2999 09:09:09 GMT" /> 
  <meta name="description" content="自Jquery1.7起，on()方法是 bind()、live()、delegate() 方法的新的替代品，我们推荐使用on()来处理业务中的事件绑定，通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在 - 米虫 - 做一个有理想的米虫 - www.mebugs.com" /> 
  <meta name="keywords" content="米虫,程序员,博客,学习,工作,物联网,IT,经验,总结,分享,Java,Go,Linux,前端,数据库" /> 
  <link rel="icon" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link rel="shortcut icon" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link rel="apple-touch-icon-precomposed" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link href="http://blog.mebugs.com/static/css/load.css?v=1.0" rel="stylesheet" type="text/css" />
  <link href="http://blog.mebugs.com/static/css/base.css?v=1.0" rel="stylesheet" type="text/css" />
      <link href="http://blog.mebugs.com/static/css/post.css?v=1.0" rel="stylesheet" type="text/css" />
  <link href="http://blog.mebugs.com/static/css/coms.css?v=1.0" rel="stylesheet" type="text/css" /> 
  <link href="http://blog.mebugs.com/static/css/marked/marked.css?v=1.0" rel="stylesheet" type="text/css" /> 
            <link href="http://blog.mebugs.com/static/css/mobile/base.css?v=1.0" rel="stylesheet" type="text/css" media="screen and (max-device-width:1200px)" /> 
    <!-- 谷歌广告 -->
  <script data-ad-client="ca-pub-2699978133125218" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 </head> 
 <body> 
 <div class="loader" id="loader">
   <div class="load">
     <hr/><hr/><hr/><hr/>
   </div>
 </div>
  <header> 
   <div class="w"> 
    <a class="logo" href="/"></a> 
    <div class="menu"> 
     <a  href="/">首页</a> 
     <a class="mck" href="/posts/new_1.html">文章</a> 
     <a  href="/category/list_1.html">分类</a> 
     <a  href="/tag/list_1.html">标签</a> 
     <a  href="/page/about.html">关于</a> 
     <a  href="/page/link.html">友链</a> 
     <a  href="/page/msg.html">留言</a> 
     <a  href="/page/map.html">地图</a> 
    </div> 
    <div class="temp" onclick="setShow()"></div><div class="mobim" onclick="setMbm()"><ul><li></li><li></li><li></li></ul></div> 
        <div class="pomenu" onclick="doPmenu(true)"><div class="mmenu" id="pomenu" ><ul><li>‹</li><li></li><li>›</li></ul></div></div>
       </div> 
  </header>  <!-- POST TOP -->
  <div class="r rt"> 
   <div class="w tb_15"> 
    <div class="c c_12 pst"> 
     <div class="pt pct rtl"> 
      <h1>Jquery中bind()、live()、delegate()和on()的区别</h1> 
     </div> 
     <div class="pdest rtr">自Jquery1.7起，on()方法是 bind()、live()、delegate() 方法的新的替代品，我们推荐使用on()来处理业务中的事件绑定，通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在</div> 
    </div> 
   </div> 
  </div> 
  <div class="r"> 
   <div class="w tb_15"> 
    <div class="c c_3 prel"> 
     <div class="menue" id="menue"><ul><li><a href="javascript:runTo('menu_1')" class="pl1">关于on()方法</a> <!----></li><li><a href="javascript:runTo('menu_2')" class="pl1">bind()方法</a> <!----></li><li><a href="javascript:runTo('menu_3')" class="pl1">live()方法</a> <!----></li><li><a href="javascript:runTo('menu_4')" class="pl1">delegate()方法</a> <!----></li><li><a href="javascript:runTo('menu_5')" class="pl1">on()方法</a> <!----></li><li><a href="javascript:runTo('menu_6')" class="pl1">小结</a> <!----></li></ul></div> 
    </div> 
    <div class="c c_9">
     <!-- post banner info -->
     <div class="mban"> 
      <img src="http://blog.mebugs.com/static/upload/banner/1646185715696.jpg" /> 
            <div class="pfro">
        <p>
          <span>所属分类</span>
          <b class="pta"><a href="/category/web_1.html">WEB</a> </b>
        </p>
        <p>
          <span>相关标签</span>
          <b class="pta"><a href="/tag/jquery_1.html">JQuery</a><a href="/tag/method_1.html">方法</a><a href="/tag/bind_1.html">绑定</a></b>
        </p>
      </div>
           </div>
     <!-- post content -->
     <div id="html" class="output mark"><h1 id="menu_1">关于on()方法</h1><p>自Jquery1.7起，on()方法是 bind()、live()、delegate() 方法的新的替代品。</p>
<p>但这不并意味着其他处理事件绑定的方法没有意义，实际开发过程中可以依照场景选择某些方法。</p>
<h1 id="menu_2">bind()方法</h1><p>bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。</p>
<p>当使用它来连接事件处理函数时,它仍然非常简洁,但是也存在着一些性能方面的问题</p>
<pre><code class="hljs language-js"><span class="hljs-comment">//bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 </span>
<span class="hljs-comment">//常见的click()方法是bind()方法的简写</span>
$(<span class="hljs-string">&quot;#add&quot;</span>).<span class="hljs-title function_">bind</span>(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){}); 
<span class="hljs-comment">//等效</span>
$(<span class="hljs-string">&quot;#add&quot;</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){});
</code></pre>
<p>优点:</p>
<ul>
<li>适用于各种浏览器</li>
<li>连接事件处理函数非常方便快捷</li>
<li>可以使用.click()、.hover()等简写方法来更方面地连接事件处理函数</li>
<li>对于简单的ID选择器，使用bind()方法可以很快地连接事件处理函数，而且当事件被触发时，事件处理函数几乎是马上就被调用了</li>
</ul>
<p>缺点:</p>
<ul>
<li>当匹配多个元素时，会将所有的事件处理函数附加到所有匹配的元素</li>
<li><strong>不可以动态地匹配相同选择器的元素</strong></li>
<li>操作大量匹配的元素时会有性能方面的问题</li>
<li>附加操作是在前期完成的,这可能导致页面加载时存在性能问题</li>
</ul>
<h1 id="menu_3">live()方法</h1><p>live()方法在使用时与bind()方法一致，但在实际处理时，存在一个委托机制。</p>
<p>方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。</p>
<p>通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它。</p>
<p>一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用。</p>
<p>这个工作在用户交互时对性能方面造成一定的影响，但是初始化注册事件的过程相当地快。</p>
<pre><code class="hljs language-js">$(<span class="hljs-string">&quot;#add&quot;</span>).<span class="hljs-title function_">live</span>(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){}); 
</code></pre>
<p>优点:</p>
<ul>
<li>所有事件处理函数都只注册一次，不像bind()那样进行多次注册</li>
<li>将bind()方法升级到live()方法非常方便，你仅需要将&quot;bind&quot;替代为&quot;live&quot;</li>
<li>动态添加到DOM的元素也将被神奇的匹配到，真实的事件信息是被注册到document元素上的</li>
<li>可以在文档加载完之前连接事件处理函数，这样可以更好地利用时间</li>
</ul>
<p>缺点:</p>
<ul>
<li>Jquery1.7以后的版本被弃用，应该在代码里逐步放弃使用它</li>
<li>使用这个方法时链式操作没有得到正确的支持，可能会出错</li>
<li>所做的匹配操作基本上没用，因为它只用于在document元素上注册事件处理函数</li>
<li>使用event.stopPropogation()方法将会没用，事件已经被委托到了document</li>
<li>所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用</li>
<li>所连接的事件总是被委托到document上，所如果你的DOM的层级很深的话，会导致一定的性能问题</li>
</ul>
<h1 id="menu_4">delegate()方法</h1><p>delegate()方法与live()方式实现方式相类似，但不是将选择器或者事件信息附加到document，而是让你指定附加的元素<br/>与live()方法类似的地方在于，这个方法也是使用事件委托来完成</p>
<pre><code class="hljs language-js"><span class="hljs-comment">//#add将作为根元素进行事件委托</span>
$(<span class="hljs-string">&quot;#add&quot;</span>).<span class="hljs-title function_">delegate</span>(<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){});
</code></pre>
<p>优点:</p>
<ul>
<li>可以选择将选择器或者事件信息附加到指定的元素</li>
<li>匹配操作实际上在前面并没有执行，而是用来注册到指定的元素</li>
<li>链式操作可以得到正确的支持</li>
<li>Jquery仍然需要迭代这些选择器或者事件信息来匹配元素，不过选择的元素作为根元素，所以筛选的量会大幅减少</li>
<li>使用了事件委托机制，可以匹配到被动态地添加到DOM的元素</li>
<li>可以在文档加载完之前连接事件处理函数</li>
</ul>
<p>缺点:</p>
<ul>
<li>bind()方法不可以直接升级到delegate()方法</li>
<li>Jquery仍然需要使用marchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用</li>
<li>当操作大量匹配的元素时会有性能方面的问题</li>
</ul>
<h1 id="menu_5">on()方法</h1><p>在Jquery1.7版本后bind()、live()和delegate()方法只需要使用on()方法一种方式来调用它们</p>
<pre><code class="hljs language-js"><span class="hljs-comment">//基本实例</span>
$(<span class="hljs-string">&quot;p&quot;</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){});
</code></pre>
<p>优点:</p>
<ul>
<li>使各种事件绑定方法一致</li>
<li>在Jquery源码中bind()、live()、delegate()方法实际上是调用了此方法，简化了jQuery代码库并删除了一级重定向</li>
<li>提供了使用delegate()方法的优点，并且仍然提供对bind()方法的支持</li>
</ul>
<p>缺点:</p>
<ul>
<li>给人带来了一些疑惑，因为方法的实际执行方式将根据你如何调用方法而改变</li>
</ul>
<h1 id="menu_6">小结</h1><ol>
<li>减少使用bind()方法，因为它把同一个事件处理函数附加到了每一个匹配的元素上</li>
<li>停用live()方法，因为它已经被弃用了同时也会带来很多问题</li>
<li>delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理</li>
<li>on()方法其实就是模拟bind()、live()、delegate()实现的语法糖，具体取决于你如何调用它</li>
<li>尽量使用新的on()方法，尤其在Jquery1.7版本后尽情使用该方法！</li>
</ol>
</div>
     <!-- author -->
     <div class="row">
      <div class="authors">
       <div class="mea"> 
        <img class="meavt" src="/static/img/me_avator.jpg" /> 
        <div class="meainfo">
            <h1>米虫</h1>
            <p>做一个有理想的米虫，伪全栈程序猿，乐观主义者，坚信一切都是最好的安排！</p> 
            <div class="meconn">
             <a href="http://wpa.qq.com/msgrd?v=3&uin=7431346&site=qq&menu=yes" target="_blank" class="conn cqq"></a>
             <a href="mailto:iam@qiantaoyuan.com" target="_blank" class="conn cml"></a> 
             <a href="https://gitee.com/mebugs" target="_blank" class="conn cge"></a> 
             <a href="https://github.com/mebugs" target="_blank" class="conn cgb"></a>
            </div> 
           </div> 
       </div>
       <div class="mecpr">
        <p>本站由个人原创、收集或整理，如涉及侵权请联系删除</p>
        <p>本站内容支持转发，希望贵方携带转载信息和原文链接</p>
        <p>本站具有时效性，不提供有效、可用和准确等相关保证</p>
        <p>本站不提供免费技术支持，暂不推荐您使用案例商业化</p>
       </div>
      </div>
     </div>
    </div>
    <div class="c c_12" id="mother"> 
          <!-- comms form -->
     <div class="row">
      <div class="pt"> <h1>发表观点</h1> <a class="mr" href="javascript:helpComms()">提示</a> </div> 
      <div class="box"> 
       <div class="comme"> 
        <div class="namee"> 
         <div class="navt" onclick="chooseAvt()"><img id="avt" src="/static/upload/avtor/1.jpg" /><p class="bgl">选择头像</p></div> 
         <div class="nxinfo"> 
          <div class="nipt"><p>昵称</p><input id="name" type="text" placeholder="*必填,请输入您的昵称" /></div> 
          <div class="nipt"><p>邮箱</p><input id="email" type="text" placeholder="推荐选填,请输入您的电子邮箱" /></div> 
          <div class="nipt"><p>QQ</p><input id="qq" type="text" placeholder="选填,请输入您的联系QQ" /></div> 
          <div class="nipt"><p>网址</p><input id="url" type="text" placeholder="选填,请输入您的个人主页地址" /></div> 
         </div> 
        </div> 
        <div class="ctxe"><textarea id="coms" name="coms" placeholder="*必填,请输入您的精彩观点"></textarea></div> 
        <div class="sendc"><a class="bgl" href="javascript:sendComms(1049,1,0)">提交观点</a></div> 
       </div>
      </div> 
     </div>
     <!-- comms eare -->
     <div class="row">
      <div class="commi">
      <p>当前还没有观点发布，欢迎您留下足迹！</p>      </div>
           </div> 
          <!-- sml imgs -->
     <div class="row">
      <div class="box"> 
       <div class="mequc indimg">
        <div class="mequci"><a href="/category/open_1.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264859337.png" /></a></div> <div class="mequci"><a href="/page/msg.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264883629.jpg" /></a></div> <div class="mequci"><a href="/page/link.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264902496.jpg" /></a></div> <div class="mequci"><a href="/page/map.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264913873.jpg" /></a></div>        </div> 
      </div> 
     </div>
          <!-- like post -->
     <div class="row">
      <div class="pt"> 
       <h1>同类其他</h1>
       <a class="mr" href="/category/web_1.html">WEB</a>      </div> 
      <div class="box pm pa_4"> 
                  <a href="/post/nvmnjs.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646874318085.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>nvm管理node.js和npm多版本切换</h2> 
         <p class="pdesc">在业务中我们会出现不同的项目依赖与不同版本的 node.js，总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖，使用 nvm 可以让多个版本的 node.js 共存，并提供管理和切换</p> 
        </div> 
      </a> 
            <a href="/post/jcheadh.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646010594005.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>Jquery+CSS轻松实现导航动态显示隐藏</h2> 
         <p class="pdesc">绝大多数网站都会有个顶部导航，对于手机端而言为了便于访问导航常常会做固顶操作，通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法，可以轻松实现下滑隐藏，上滑显示的效果</p> 
        </div> 
      </a> 
            <a href="/post/zsycsshtml.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646128839253.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>前端多终端自适应网页开发模式</h2> 
         <p class="pdesc">智能移动终端大爆发的现阶段，手机访问网页已经成为人们不可或缺的使用习惯，开发自适应网页大势所趋，实际上无论改造还是开发本身并不复杂，但是掌握更好的开发模式会使得你编写页面更加高效快捷</p> 
        </div> 
      </a> 
            <a href="/post/upspeed.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1645059069074.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>instantclick.js预加载实现网页秒开</h2> 
         <p class="pdesc">instantclick.js利用预加载技术使得网站页面跳转时的速度得到大大提升，通过预加载数据替换当前的DOM结构体来达到减少页面请求返回的数据量，提供事件监听钩子函数便于完成页面初始化</p> 
        </div> 
      </a> 
            <a href="/post/gradc.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1645013231825.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>CSS3通过Gradients实现渐变背景色</h2> 
         <p class="pdesc">使用背景色渐变可以使得页面质感得到大幅度提升，CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡，由于颜色的渐变是由浏览器生成，因此不会出现不同分辨率下失真的情况。</p> 
        </div> 
      </a> 
            <a href="/post/slideres.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646009437104.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>侧边栏下滑即将越过时动态固顶与上滑恢复</h2> 
         <p class="pdesc">对于很多二栏布局的网站而言，正文部分过长时，侧边栏区域下拉过程中出现大片空白，因此我们可以实现当屏幕下滑达到指定元素位置（如即将越过）后对元素固顶来解决侧边栏区域的空旷感</p> 
        </div> 
      </a> 
            </div>
     </div>
         </div>
    <!-- more post new hot rand -->
    <div class="c c_4">
     <!-- new -->
     <div class="row"> 
      <div class="pt"><h1>新鲜发布</h1><a class="mr" href="/posts/new_1.html">更多</a></div> 
            <div class="box lm"> 
              <a href="/post/nvmnjs.html">  
        <div class="pimel ltop bgl">1</div> 
        <div class="pinfr"><h2>nvm管理node.js和npm多版本切换</h2></div> 
       </a>
              <a href="/post/bsonon.html">  
        <div class="pimel ltop bgl">2</div> 
        <div class="pinfr"><h2>BSON数据结构以及与JSON区别</h2></div> 
       </a>
              <a href="/post/endeco.html">  
        <div class="pimel ltop bgl">3</div> 
        <div class="pinfr"><h2>可逆（对称和非对称）与不可逆加密算法</h2></div> 
       </a>
              <a href="/post/gointfc.html">  
        <div class="pimel ltop bgl">4</div> 
        <div class="pinfr"><h2>Go中接口的设计与实现</h2></div> 
       </a>
              <a href="/post/locklock.html">  
        <div class="pimel ltop bgl">5</div> 
        <div class="pinfr"><h2>计算机中的乐观锁与悲观锁</h2></div> 
       </a>
              <a href="/post/soapjvm.html">  
        <div class="pimel ltop bgl">6</div> 
        <div class="pinfr"><h2>SoapUI启动报错The JVM could not be started</h2></div> 
       </a>
              <a href="/post/orajob.html">  
        <div class="pimel ltop bgl">7</div> 
        <div class="pinfr"><h2>Orcale定时任务管理dbms_job</h2></div> 
       </a>
              <a href="/post/mebugs.html">  
        <div class="pimel ltop bgl">8</div> 
        <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
       </a>
              <a href="/post/meals.html">  
        <div class="pimel ltop bgl">9</div> 
        <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
       </a>
              <a href="/post/meal.html">  
        <div class="pimel ltop bgl">10</div> 
        <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
       </a>
             </div> 
     </div>  
    </div>
    <div class="c c_4">
      <!-- new -->
      <div class="row"> 
       <div class="pt"><h1>近期飙升</h1><a class="mr" href="/posts/up_1.html">更多</a></div> 
              <div class="box lm"> 
                <a href="/post/mebugs.html">  
         <div class="pimel ltop bgl">1</div> 
         <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
        </a>
                <a href="/post/smvcdata.html">  
         <div class="pimel ltop bgl">2</div> 
         <div class="pinfr"><h2>一文理解SpringMVC框架核心</h2></div> 
        </a>
                <a href="/post/holdgbean.html">  
         <div class="pimel ltop bgl">3</div> 
         <div class="pinfr"><h2>SpringContextHolder工具类自由获取Bean</h2></div> 
        </a>
                <a href="/post/slideres.html">  
         <div class="pimel ltop bgl">4</div> 
         <div class="pinfr"><h2>侧边栏下滑即将越过时动态固顶与上滑恢复</h2></div> 
        </a>
                <a href="/post/ctrfctmod.html">  
         <div class="pimel ltop bgl">5</div> 
         <div class="pinfr"><h2>JAVA设计模式之创建者模式中的三种工厂模式</h2></div> 
        </a>
                <a href="/post/meals.html">  
         <div class="pimel ltop bgl">6</div> 
         <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
        </a>
                <a href="/post/oraclelilog.html">  
         <div class="pimel ltop bgl">7</div> 
         <div class="pinfr"><h2>Linux下Oracle数据库配置日志目录及统一迁移</h2></div> 
        </a>
                <a href="/post/getpramnoc.html">  
         <div class="pimel ltop bgl">8</div> 
         <div class="pinfr"><h2>JAVA服务端GET请求URL中文参数乱码</h2></div> 
        </a>
                <a href="/post/meal.html">  
         <div class="pimel ltop bgl">9</div> 
         <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
        </a>
                <a href="/post/sqlcashw.html">  
         <div class="pimel ltop bgl">10</div> 
         <div class="pinfr"><h2>SQL通过CASE WHEN语句实现条件返回</h2></div> 
        </a>
               </div> 
      </div>  
    </div>
    <div class="c c_4">
      <!-- new -->
      <div class="row"> 
       <div class="pt"><h1>随便看看</h1><a class="mr" href="/posts/rand_1.html">更多</a></div> 
              <div class="box lm"> 
                <a href="/post/nvmnjs.html">  
         <div class="pimel ltop bgl">1</div> 
         <div class="pinfr"><h2>nvm管理node.js和npm多版本切换</h2></div> 
        </a>
                <a href="/post/bsonon.html">  
         <div class="pimel ltop bgl">2</div> 
         <div class="pinfr"><h2>BSON数据结构以及与JSON区别</h2></div> 
        </a>
                <a href="/post/endeco.html">  
         <div class="pimel ltop bgl">3</div> 
         <div class="pinfr"><h2>可逆（对称和非对称）与不可逆加密算法</h2></div> 
        </a>
                <a href="/post/gointfc.html">  
         <div class="pimel ltop bgl">4</div> 
         <div class="pinfr"><h2>Go中接口的设计与实现</h2></div> 
        </a>
                <a href="/post/locklock.html">  
         <div class="pimel ltop bgl">5</div> 
         <div class="pinfr"><h2>计算机中的乐观锁与悲观锁</h2></div> 
        </a>
                <a href="/post/soapjvm.html">  
         <div class="pimel ltop bgl">6</div> 
         <div class="pinfr"><h2>SoapUI启动报错The JVM could not be started</h2></div> 
        </a>
                <a href="/post/orajob.html">  
         <div class="pimel ltop bgl">7</div> 
         <div class="pinfr"><h2>Orcale定时任务管理dbms_job</h2></div> 
        </a>
                <a href="/post/mebugs.html">  
         <div class="pimel ltop bgl">8</div> 
         <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
        </a>
                <a href="/post/meals.html">  
         <div class="pimel ltop bgl">9</div> 
         <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
        </a>
                <a href="/post/meal.html">  
         <div class="pimel ltop bgl">10</div> 
         <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
        </a>
               </div> 
      </div>  
    </div>
   </div>
  </div> 
  <footer> 
   <div class="w"> 
    <div class="c c_6"> 
     <div class="ft fl"> 
      <div class="pt pct">
       <h1>快捷分类</h1> 
      </div>
      <p>
        <a href="/posts/best_1.html">好文荐读</a>
        <a href="/posts/hot_1.html">全站热门</a>
        <a href="/posts/new_1.html">最新发布</a>
        <a href="/posts/up_1.html">近期飙升</a>
        <a href="/posts/rand_1.html">今日随选</a>
      <a href="/category/java_1.html">JAVA</a><a href="/category/web_1.html">WEB</a><a href="/category/db_1.html">数据库</a><a href="/category/linux_1.html">Linux</a><a href="/category/tool_1.html">工具</a><a href="/category/well_1.html">运维</a><a href="/category/php_1.html">PHP</a><a href="/category/app_1.html">移动端</a><a href="/category/plat_1.html">架构</a><a href="/category/open_1.html">开源</a><a href="/category/go_1.html">Golang</a><a href="/category/conn_1.html">概念</a><a href="/category/run_1.html">数据</a><a href="/category/net_1.html">中间件</a><a href="/category/security_1.html">安全</a><a href="/category/box_1.html">杂谈</a>      </p>
     </div> 
    </div>
    <div class="c c_6"> 
     <div class="ft fr"> 
      <div class="pt pct">
       <h1>热点标签</h1> 
      </div>
      <p> 
      <a href="/tag/css_1.html">CSS</a><a href="/tag/jquery_1.html">JQuery</a><a href="/tag/oracle_1.html">Oracle</a><a href="/tag/method_1.html">方法</a><a href="/tag/dismod_1.html">设计</a><a href="/tag/factory_1.html">工厂</a><a href="/tag/scripts_1.html">脚本</a><a href="/tag/confx_1.html">配置</a><a href="/tag/sql_1.html">SQL</a><a href="/tag/conn_1.html">连接</a><a href="/tag/windows_1.html">Windows</a><a href="/tag/spring_1.html">Spring</a><a href="/tag/springboot_1.html">SpringBoot</a><a href="/tag/mvc_1.html">MVC</a><a href="/tag/request_1.html">请求</a><a href="/tag/git_1.html">Git</a><a href="/tag/object_1.html">对象</a><a href="/tag/disk_1.html">磁盘</a><a href="/tag/tasks_1.html">任务</a><a href="/tag/load_1.html">加载</a><a href="/tag/password_1.html">密码</a><a href="/tag/header_1.html">导航</a><a href="/tag/log_1.html">日志</a><a href="/tag/datas_1.html">数据</a><a href="/tag/crete_1.html">创建</a><a href="/tag/morff_1.html">高并发</a><a href="/tag/maven_1.html">Maven</a><a href="/tag/ift_1.html">条件</a><a href="/tag/vers_1.html">版本</a><a href="/tag/springmvc_1.html">SpringMVC</a>      </p>
     </div> 
    </div> 
    <div class="c c_12"> 
     <div class="fu"> 
      <p>米虫<em>[独立博客]</em> 丨 <a href="/">www.mebugs.com</a> 丨 <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备20039109号</a>丨 做一个有理想的米虫</p> 
      <p><a href="/page/about.html">关于</a> 丨 <a href="/page/msg.html">留言</a> 丨 <a href="/page/link.html">友链</a> 丨 <a href="/page/map.html">地图</a></p> 
     </div> 
    </div> 
   </div> 
  </footer> 
  <div class="back_top" onclick="backTop()"> </div> 
   
  <div class="rzz" id="cavt">
    <div class="rea cave box">
      <div class="reat">
        <h1>选择个人头像</h1>
      </div>
      <div class="avts">
        <img src="/static/upload/avtor/1.jpg" onclick="setAvt(this,1)" />
        <img src="/static/upload/avtor/2.jpg" onclick="setAvt(this,2)" />
        <img src="/static/upload/avtor/3.jpg" onclick="setAvt(this,3)" />
        <img src="/static/upload/avtor/4.jpg" onclick="setAvt(this,4)" />
        <img src="/static/upload/avtor/5.jpg" onclick="setAvt(this,5)" />
        <img src="/static/upload/avtor/6.jpg" onclick="setAvt(this,6)" />
        <img src="/static/upload/avtor/7.jpg" onclick="setAvt(this,7)" />
        <img src="/static/upload/avtor/8.jpg" onclick="setAvt(this,8)" />
        <img src="/static/upload/avtor/9.jpg" onclick="setAvt(this,9)" />
        <img src="/static/upload/avtor/10.jpg" onclick="setAvt(this,10)" />
        <img src="/static/upload/avtor/11.jpg" onclick="setAvt(this,11)" />
        <img src="/static/upload/avtor/12.jpg" onclick="setAvt(this,12)" />
      </div>
      <div class="sendc"> 
        <a class="rcls" href="javascript:clsAvt()">关闭</a>
      </div> 
    </div>
  </div>
  <div class="rzz" id="rzz">
    <div class="rea box">
      <div class="reat">
        <h1 id="rwork"></h1>
      </div>
      <div class="comme">
       <div class="namee">  
        <div class="nxinfo"> 
         <div class="nipt"> 
          <p>昵称</p> 
          <input id="rname" type="text" placeholder="*必填,请输入您的昵称" /> 
         </div> 
         <div class="nipt"> 
          <p>邮箱</p> 
          <input id="remail" type="text" placeholder="推荐选填,请输入您的电子邮箱" /> 
         </div> 
         <div class="nipt"> 
          <p>QQ</p> 
          <input id="rqq" type="text" placeholder="选填,请输入您的联系QQ" /> 
         </div> 
         <div class="nipt"> 
          <p>网址</p> 
          <input id="rurl" type="text" placeholder="选填,请输入您的个人主页地址" /> 
         </div> 
        </div> 
       </div> 
       <div class="ctxe"> 
        <textarea id="rcoms" name="rcoms" placeholder="*必填,请输入您的精彩观点"></textarea> 
       </div> 
       <div class="sendc"> 
        <a class="rcls" href="javascript:clsComms()">取消</a> 
        <a id="repMethod" class="bgl" href="#">回复观点</a> 
       </div> 
      </div> 
    </div>
  </div>
  <div class="rzz" id="chelp">
    <div class="rea box chelp">
      <div class="reat">
        <h1>评论提示</h1>
      </div>
      <div class="helpe">
        <ul>
          <li>头像：系统为您提供了12个头像自由选择，初次打开随机为你选择一个</li>
          <li>邮箱：可选提交邮箱，该信息不会外泄，或将上线管理员回复邮件通知</li>
          <li>网址：可选提交网址，评论区该地址将以外链的形式展示在您的昵称上</li>
          <li>记忆：浏览器将记忆您已选择或填写过得信息，下次评论无需重复输入</li>
          <li>审核：提供一个和谐友善的评论环境，本站所有评论需要经过人工审核</li>
        </ul>
      </div>
      <div class="sendc">
       <a class="bgl" href="javascript:clsHelpComms()">了解</a> 
      </div>
    </div>
  </div>
    </div> 
  <script type="text/javascript">
    var pid = 1049;  </script>
  <script src="http://blog.mebugs.com/static/js/base.js?v=1.0"></script> 
         <script src="http://blog.mebugs.com/static/lib/jquery/jquery-3.6.0.min.js?v=1.0"></script>
   <script src="http://blog.mebugs.com/static/js/popup.js?v=1.0"></script>  
   <script src="http://blog.mebugs.com/static/js/post.js?v=1.0"></script> 
   <script src="http://blog.mebugs.com/static/js/mark.js?v=1.0"></script> 
       </body>
</html>